<template>
  <div>
  	<!-- viheader 头部-->
  	<vi-header :header = headerData></vi-header>
  	<!-- banner 轮播-->
  	<banner-Box></banner-Box>
  	<!--四个任务发布按钮-->
  	<div class="moduleJump">
  		<ul>
  			<li>
  				<img src="../../assets/tabbar/jd.png">
  				<h2>京东任务</h2>
  			</li>
  			<li>
  				<img src="../../assets/tabbar/tmall.png">
  				<h2>淘宝任务</h2>
  			</li>
  			<li>
  				<img src="../../assets/tabbar/us.png">
  				<h2>唯品会任务</h2>
  			</li>
  			<li>
  				<img src="../../assets/tabbar/jd.png">
  				<h2>苏宁任务</h2>
  			</li>
  		</ul>
  	</div>
  	<!--详情列表-->
  	<div>
	  	<div class="publishingCon" v-for='item in listData'>
	  		<div>
	  			<h3 class="leftSpan">{{item.name}}</h3>
	  			<span class="rightSpan"><img src="../../assets/tabbar/jd.png"></span>
	  		</div>
	  		<div>
	  			<h3 class="leftSpan">总价：<b class="red">{{item.totelPrice}}</b>¥</h3>
	  			<h2 class="rightSpan"><b class="red">{{item.number}}</b></h2>
	  		</div>
	  		<div>
	  			<h3 class="leftSpan">佣金：<b>{{item.price}}</b>¥</h3>
	  			<span class="rightSpan"><b>{{item.totelNumber}}</b></span>
	  		</div>
	  	</div>
	  	<divider>没有更多啦</divider>
  	</div>
  </div>
</template>

<script>
	import viHeader from '../viHeader/viHeader'	
	import bannerBox from '../bannerBox/bannerBox'	
	import { Divider } from 'vux'
	
	export default {
		components: {
      viHeader,
      bannerBox,
      Divider
    },
    data:function(){
    	return {
    		headerData:'发布任务',
    		listData:[
    			{name:'电热水壶，电饭煲',totelPrice:400,number:40,price:760,totelNumber:120},
    			{name:'热水器',totelPrice:120,number:37,price:170,totelNumber:100},
    			{name:'九阳豆浆机',totelPrice:300,number:140,price:560,totelNumber:200},
    			{name:'苏泊尔智能煲',totelPrice:140,number:63,price:660,totelNumber:340},
    			{name:'电热水壶，电饭煲',totelPrice:60,number:67,price:460,totelNumber:170},
    		]
    	}
    }
	}
</script>

<style lang="less">
	@import 'publishingTask.less';

</style>
